<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我+1</button>
  <hr>
  <h2>当前的信息为：{{msg}}</h2>
  <button @click="msg+='！' ">修改信息</button>
  <hr>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>薪资：{{person.job.j1.salary}}K</h2>
  <button @click="person.name+='~' ">修改姓名</button>
  <button @click="person.age++ ">修改年龄</button>
  <button @click="person.job.j1.salary++ ">涨薪</button>
  <hr>
</template>

<script>
import {ref,watch,reactive} from 'vue'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Demo',
  // watch:{
  //   // sum:function (newVal,oldVal){
  //   //   console.log(newVal,oldVal)
  //   // }
  //   sum:{
  //     immediate:true,
  //     deep:true,
  //     handler:function (newVal,oldVal){
  //
  //     }
  //   }
  // },


  setup: function () {
    let sum = ref(0)
    let msg = ref('你好')
    let person = reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    //1.监视ref所定义的一个响应式数据
    // watch(sum,(newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // })
    //2.监视ref所定义的多个响应式数据
    // watch([sum,msg],(newVals,oldVals)=>{
    //   console.log(newVals,oldVals)
    // })
    //监视ref所定义的多个响应式数据
    // watch([sum,msg],(newVals,oldVals)=>{
    //   console.log(newVals,oldVals)
    // },{
    //   immediate:true,
    //   // deep:true
    // })
    //3.监视reactive所定义的多个响应式数据
    // 注意：oldVal 无法获取到
    // 注意：强制开启了深度监视 （deep:true配置无效）
    // watch(person,(newVal,oldVal)=>{
    //     console.log(newVal,oldVal)
    // },{deep:false,immediate:true})

    //4.监视reactive所定义的多个响应式数据中的某个属性
    // watch(()=>person.age,(newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // },{immediate:true})

    //5.监视reactive所定义的多个响应式数据中的某些属性
    // watch([()=>person.age,()=>person.name],(newVal,oldVal)=>{
    //   console.log(newVal,oldVal)
    // },{immediate:true})

    //特殊情况监视job reactive所定义的对象中的某个属性，（值依然为对象--job），所以deep配置依然有效
    watch(()=>person.job,(newVal,oldVal)=>{
      console.log(newVal,oldVal)
    },{deep:true})

    return {
      sum,msg,person

    }
  }
}
</script>


